<template>
  <div class="alarmConfiguration zy-content">
    <!-- 搜索 -->
    <search :columns="searchData" @getSearch="getSearch(arguments)" key="search"></search>
    <div class="alarmConfiguration">
      <div class="list-layout mt16">
        <!-- 批量删除 批量导出  批量导入 下载模板 新增-->
        <div class="btns clear">
          <span class="title">{{ $t("common.listInformation") }}</span>
          <Button @click="addWareHouse()">{{ $t("common.New") }}</Button>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table
            class="resizable-table"
            border
            @on-column-width-resize="onColumnWidthResize"
            :columns="columns"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr"
          >
            <template slot-scope="{ row }" slot="storageNum">
              <span class="operationBtn" @click="viewClick(row)">
                <i class="iconfont zy-common-chakan"></i>
                {{ row.storageNum }}</span
              >
            </template>
            <template slot-scope="{row}" slot="action">
            <span
              class="operationBtn"
              @click="delPrrShowH(row)"
              ><i class="iconfont zy-common-shanchu"></i
              >{{ $t("common.Delete") }}</span
            >
          </template>
          </Table>
        </div>
        <!-- 分页 -->
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="delIds.length" />
          <Page
            :total="total"
            :page-size="pageSize"
            :page-size-opts="pageSizeOption"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
          />
        </div>
      </div>
      <!-- 新增 -->
      <Modal :mask-closable="false"
        v-model="addWareDialog"
        title="新增库位"
        class="modal-content-layout"
        width="400"
      >
        <Form
          ref="form"
          class="formList"
          :model="formItem"
          label-position="top"
          :rules="rules"
        >      
          <Row :gutter="20">
            <Col span="24">
              <FormItem :label="$t('功能位置')" prop="mlocationCode">
                <Cascader
                  clearable
                  ref="cascader"
                  :data="orgList"
                  v-model="formItem.mlocationCode"
                  change-on-select
                  @on-change="change"
                  placeholder="请选择"
                >
                </Cascader>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem :label="$t('库区')" prop="mreservoir">
                <Input
                  v-model="formItem.mreservoir"
                  filterable
                  clearable
                  :placeholder="`${$t('common.inputInfo')}`"
                >
                </Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem :label="$t('库位')" prop="mwarehouse">
                <Input
                  v-model="formItem.mwarehouse"
                  filterable
                  clearable
                  :placeholder="`${$t('common.inputInfo')}`"
                >
                </Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="default" @click="addWareDialog = false">{{
            $t("common.Cancle")
          }}</Button>
          <Button type="primary" :loading="loading" @click="addOk('form')">{{
            $t("maintenance.Confirmed")
          }}</Button>
        </div>
      </Modal>
      <Modal :mask-closable="false"
        v-model="infoDialogView"
        title="工装详情"
        class="modal-content-layout"
        width="50%"
      >
        <div class="searchBox search-box-layout">
          <Row :gutter="24">
            <Col span="8">
              <div>
                <p class="label">工装编号</p>
                <div class="ipt">
                  <Input v-model="moldCode"></Input>
                </div>
              </div>
            </Col>
            <Col span="8">
              <div>
                <p class="label hide-label">--</p>
                <div class="ipt">
                  <Button
                    class="search-btn"
                    type="primary"
                    @click="changeNum1()"
                    >{{ $t("common.Query") }}</Button
                  >
                  <Button class="reset-btn" @click="resetSearch()"
                    >{{ $t("common.reset") }}
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table
            class="resizable-table"
            border
            @on-column-width-resize="onColumnWidthResize"
            :columns="columns1"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr1"
          >
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="delIds.length" />
          <Page
            :total="total1"
            :page-size="pageSize1"
            :page-size-opts="pageSizeOption"
            :current="pageNum1"
            @on-change="changePageNum1"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
          />
        </div>
        <div slot="footer">
          <Button type="default" @click="infoDialogView = false">{{
            $t("common.Cancle")
          }}</Button>
          <Button type="primary" @click="infoDialogView = false">{{
            $t("maintenance.Confirmed")
          }}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import {
  searchApi,
  addApi,
  getDetail,
} from "@/api/moldManagement/wareHouseManage.js";
import recursion from "@/util/recursion";
import { findOrgByToken } from "@/api/index.js";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "storeHouse", //仓库配置
  components: { search },
  mixins: [toggleTableOperation],
  data() {
    return {
      dataArr1:[],
      moldCode: "",
      rules: {
        mlocationCode: [
          {
            required: true,
            message: `${this.$t("common.selectInfo")}`,
            trigger: "change",
            type: "array",
          },
        ],
        mreservoir: [
          {
            required: true,
            message: `${this.$t("common.inputInfo")}`,
            trigger: "blur",
          },
        ],
        mwarehouse: [
          {
            required: true,
            message: `${this.$t("common.inputInfo")}`,
            trigger: "blur",
          },
        ],
      },
      searchData: [
        {
          title: "功能位置",
          key: "mlocationCode",
          type: "cascader",
          dicUrl: "/basic/organization/findListByToken?level=0",
          params: {
            label: "name",
            value: "code",
            children: "children",
          },
        },
        {
          title: "库位",
          key: "moldCode",
        },
      ],
      columns: [
        {
          title: "功能位置",
          key: "mlocation",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "库区",
          key: "mreservoir",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "库位",
          key: "mwarehouse",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "维护时间",
          key: "mmaintenanceTime",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "维护人",
          key: "mmaintainer",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "工装详情",
          key: "storageNum",
          minWidth: 100,
          slot: "storageNum",
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          resizable: true,tooltip: true,
        },
      ],
      columns1: [
        {
          title: "工装名称",
          key: "moldName",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "资产编号",
          key: "moldCode",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
        {
          title: "工装编号",
          key: "moldName",
          minWidth: 100,
          align: "center",
          resizable: true,tooltip: true,
        },
      ],
      checkBtnPermission: {},
      ruleValidate: {
        category: [{ required: true, message: this.$t("common.selectInfo") }],
        name: [{ required: true, message: this.$t("common.inputInfo") }],
        yeiuys: [{ required: true, message: this.$t("common.inputInfo") }],
      },

      addWareDialog: false,
      infoDialogView: false,

      formItem: {},
      allCheck: false,
      loading: false,
      create: false,
      searchParams: {},
      searchParams1: {},

      pageNum: 1,
      pageSize: 10,
      total: 0,

      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      dataArr: [],
      delFaultCodeShowF: false, //是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
      orgList: [],
    };
  },
  mounted() {
    this.getOrgList();
    this.getTableColumnsWidth(this.columns);
    this.searchList();
    let itemList = JSON.parse(window.localStorage.getItem("USER_URI"));
    for (let item of itemList) {
      if (item.code == "moldLedgerAddBtn") {
        this.checkBtnPermission.moldLedgerAddBtn = true;
      }
    }
  },
  methods: {
    filterData(arr, code) {
      let temp = [];
      let callback = function (nowArr, code) {
        for (let item of nowArr) {
          if (item.code === code) {
            temp.unshift(item.code);
            callback(arr, item.parentId);
            break;
          } else {
            if (item.children && item.children.length) {
              callback(item.children, code);
            }
          }
        }
      };
      callback(arr, code);
      return temp;
    },
    getSearch(params) {
      this.searchParams = JSON.parse(JSON.stringify(params[0]));
      if (this.searchParams.mlocationCode.length !== 0) {
        this.searchParams.mlocationCode = this.searchParams.mlocationCode.join(",");
      }
      this.pageNum=1;
      this.searchList();
    },
    change(val) {
      this.formItem.mlocationCode=val
      this.formItem.mlocation=this.$refs['cascader'].displayRender
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {

      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    viewClick(row) {
      this.moldCode='';
      this.row = row;
      this.viewMoldInfo();
    },
    changeNum1() {
      this.pageNum1 = 1;
      this.viewMoldInfo();
    },
    changePageSize1(pageSize) {
      this.pageSize1 = pageSize;
      this.viewMoldInfo();
    },
    changePageNum1(val) {
      this.pageNum1 = val;
      this.viewMoldInfo();
    },
    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      searchApi(params).then((res) => {
        if (res.code === 200) {
          this.dataArr = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //增加或编辑
    addWareHouse(row) {
      this.$refs.form.resetFields();
      this.formItem = {};
      this.addWareDialog = true;
    },
    addOk(name) {
      let { mlocation, mreservoir, mwarehouse,mlocationCode } = this.formItem;
      let data = {
        mlocationCode: mlocationCode.join(","),
        mreservoir,
        mwarehouse,
        mlocation,
      };
      this.$refs[name].validate((valid) => {
        if (!valid) {
          return;
        } else {
          this.loading = true;
          addApi(data).then((res) => {
            this.loading = false;
            if (res.code === 200) {
              this.changeNum();
              this.$Message.success("新增成功");
              this.create = false;
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        }
      });
    },
    viewMoldInfo() {
      getDetail({
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        moldCode: this.moldCode,
      }).then((res) => {
        if (res.code == 200) {
          this.total1 = res.data.total;
          this.dataArr1 = res.data.records;
          this.infoDialogView = true;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getOrgList() {
      let params = {
        level: 0,
      };
      findOrgByToken(params).then((res) => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "code",
            children: "children",
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
  },
};
</script>
    
<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}
</style>
    
    